<template>
  <div id='radarchart'>
    <div id='radar'></div>
    <div id='radarData'>
      <el-button type="primary" plain @click="RandomData">随机数</el-button>
      <el-button type="primary" plain @click="addData">Add</el-button>
      <el-button type="primary" plain @click="deleteData">Delete</el-button>
      <el-row>
        <el-col :span="12">
          <el-table :data='radarData[0].data' height='250' style='width: 100%;'>
            <el-table-column type='index' label='#'></el-table-column>
            <el-table-column prop='axis' label='维度'></el-table-column>
            <el-table-column prop='value' label='值'></el-table-column>
          </el-table>
        </el-col>
        <el-col :span="12">
          <el-table :data='radarData[1].data' height='250' style='width: 100%;'>
            <el-table-column type='index' label='#'></el-table-column>
            <el-table-column prop='axis' label='维度'></el-table-column>
            <el-table-column prop='value' label='值'></el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { RadarChart } from './RadarChart'
export default {
  data () {
    return {
      radarData: [],
      radarChart: ''
    }
  },
  created () {
    this.setData()
    this.radarChart = new RadarChart('radar')
    this.radarChart.data = this.radarData
  },
  mounted () {
    this.radarChart.draw()
  },
  computed: {
    radarDataS: {
      get: function () {
        return this.radarData.toString()
      },
      set: function () {}
    }
  },
  methods: {
    setData () {
      this.radarData = [
        {
          cate: 'item-1',
          data: [
            { axis: 'Jan', value: 700 },
            { axis: 'Feb', value: 1453 },
            { axis: 'March', value: 1300 },
            { axis: 'April', value: 1534 },
            { axis: 'May', value: 1534 },
            { axis: 'June', value: 1547 },
            { axis: 'July', value: 1100 },
            { axis: 'August', value: 1800 },
            { axis: 'September', value: 1700 },
            { axis: 'October', value: 1500 },
            { axis: 'November', value: 1000 },
            { axis: 'December', value: 1200 }
          ]
        },
        {
          cate: 'item-2',
          data: [
            { axis: 'Jan', value: 1400 },
            { axis: 'Feb', value: 453 },
            { axis: 'March', value: 560 },
            { axis: 'April', value: 734 },
            { axis: 'May', value: 634 },
            { axis: 'June', value: 547 },
            { axis: 'July', value: 800 },
            { axis: 'August', value: 800 },
            { axis: 'September', value: 600 },
            { axis: 'October', value: 579 },
            { axis: 'November', value: 514 },
            { axis: 'December', value: 1800 }
          ]
        }
      ]
    },
    RandomData () {
      for (let i = 0; i < this.radarData.length; ++i) {
        for (let j = 0; j < this.radarData[i].data.length; ++j) {
          this.radarData[i].data[j].value = parseInt(Math.random() * 1500) + 300
        }
      }
      this.radarChart.data = this.radarData
      this.radarChart.update()
    },
    addData () {
      if (this.radarData.length < 2) {
        let init = JSON.parse(JSON.stringify(this.radarData[0]))
        init.cate = 'item-2'
        for (let i = 0; i < init.data.length; ++i) {
          init.data[i].value = parseInt(Math.random() * 1500) + 300
        }
        this.radarData.push(init)
        this.radarChart.data = this.radarData
        this.radarChart.update()
      }
    },
    deleteData () {
      if (this.radarData.length === 2) {
        this.radarData.pop()
        this.radarChart.data = this.radarData
        this.radarChart.update()
      }
    }
  }
}
</script>
<style scoped>
#radarchart {
  height: 100%;
  width: 100%;
}

#radar {
  height: 70%;
  width: 100%;
}

#radarData {
  height: 30%;
  width: 100%;
}
</style>
